<template>
	<view class="goods-container">
		<view class="goodstitleBox u-flex-y-center">
			<view class="goodstitleItem u-flex-xy-center" v-for="(item, key) in goodstitleList"
				:class="{ active: key == current }" :key="key" @click="tabschange(key)">
				<view class="text1">
					{{ item.text1 }}
				</view>
				<view class="text2">
					{{ item.text2 }}
				</view>
			</view>
		</view>
		<view class="ckgd u-flex-xy-center" @click="$u.goPage('/pages/shop/goods/list/list')"> 查看更多 </view>

		<view class="goodslist u-flex-y-center">
			<template v-if="current == 0">
				<goodsitem v-for="(item, key) in current0list" :dicts="dicts" :item="item"
					:levelTypeList="levelTypeList">
				</goodsitem>
			</template>
			<template v-else-if="current == 1">
				<current1item v-for="(item, key) in current1list" :key="key" :item="item"></current1item>
			</template>
			<template v-else-if="current == 2">
				<current2item v-for="(item, key) in current2list" :key="key" :item="item"></current2item>
			</template>

		</view>
	</view>
</template>

<script>
	import {
		getReleaseDiscountPage,
		getReleasePage,
		getReleaseList,
	} from "@/api/goods.js"
	import {
		getDicts
	} from "@/api/dictdata";
	import {
		getProductClassAll
	} from "@/api/index.js";
	import current1item from "./components/current1item.vue";
	import current2item from "./components/current2item.vue";
	export default {
		components: {
			current1item,
			current2item
		},
		data() {
			return {
				current0list: [],
				current1list: [],
				current2list: [],
				current: 0,
				dicts: {},
				levelTypeList: [],
				goodstitleList: [{
						text1: "特价专区",
						text2: "优惠不断",
						query: {
							type: 1,
						},
					},
					{
						text1: "采购广场",
						text2: "海量采购",
						query: {
							type: 2,
						},
					},
					{
						text1: "供应广场",
						text2: "品质保证",
						query: {
							type: 3,
						},
					},
				],
			};
		},
		mounted() {
			this.init();
		},
		methods: {
			async init() {
				const res = await getProductClassAll();
				this.levelTypeList = res.data;
				let {
					data
				} = await getDicts("transactional_mode,manage_model");
				// dictType
				let transactional_mode = data.filter(e => {
					return e.dictType == 'transactional_mode'
				});
				let manage_model = data.filter(e => {
					return e.dictType == 'manage_model'
				});
				// manage_model = manage_model.data;
				this.dicts = {
					transactional_mode,
					manage_model
				};
				this.getlist();
			},
			async getlist() {
				if (this.current == 0) {
					let data = await getReleaseDiscountPage({
						pageNo: 1,
						pageSize: 4
					});
					this.current0list = data.data.list;
				} else if (this.current == 1) {
					let data = await getReleasePage();
					this.current1list = data.data.filter(e => e.tradingDO);
				} else if (this.current == 2) {
					let data = await getReleaseList();
					this.current2list = data.data.filter(e => e.tradingDO);
				}

			},
			tabschange(index) {
				// uni.navigateTo({
				// 	url: "/pages/index/sector/sector?type=" + index
				// })
				this.current = index;
				this.getlist();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.goodstitleBox {
		justify-content: space-between;
		padding: 0 20rpx;
		text-align: center;

		// 750 - 40 710/3 2 3
		.goodstitleItem {
			width: 220rpx;
			height: 120rpx;
			background: #fff;
			flex-direction: column;
			border-radius: 20rpx;

			.text1 {
				font-size: 32rpx;
				padding-bottom: 4rpx;
			}

			.text2 {
				font-size: 24rpx;
				color: $uni-text-color-grey;
			}

			&.active {
				background-color: #39c03e;
				color: #fff;

				.text2 {
					color: #fff;
				}
			}
		}
	}

	.goodslist {
		// flex-wrap: wrap;
		// padding: 0 20rpx 20rpx 20rpx;
		// justify-content: space-between;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 20rpx;
		margin-top: -20rpx;
	}

	.ckgd {
		height: 80rpx;
		display: flex;
		font-size: 24rpx;
		justify-content: flex-end;
		padding-right: 20rpx;
		color: $uni-text-color-grey;
	}
</style>